<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>备件管理系统 - 用户管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
<div id="app">
    <!-- 页面标题插槽（模拟） -->
    <h2 style="display: none;"><slot name="pageTitle">用户管理</slot></h2>

    <!-- 页面头部插槽（模拟） -->
    <header class="header" style="display: flex; align-items: center; justify-content: space-between;">
        <h2 style="margin: 0;">用户管理</h2>
        <el-button type="info" size="small" @click="logout">退出</el-button>
    </header>

    <!-- 搜索框和新增按钮 -->
    <div style="display: flex; align-items: center; justify-content: center; margin: 20px 0;">
        <el-input
                v-model="searchText"
                placeholder="搜索用户名/角色"
                size="small"
                style="width: 220px; margin-right: 10px;"
                @input="handleSearch"
                clearable
        ></el-input>
        <el-button
                type="primary"
                size="small"
                style="background-color: #007bff;"
                @click="showDialog = true"
        >新增用户</el-button>
    </div>

    <el-dialog title="新增用户" v-model="showDialog" width="500px">
        <el-form :model="dialogUser" label-position="left" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="dialogUser.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="dialogUser.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-input v-model="dialogUser.role"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="showDialog = false">取消</el-button>
            <el-button type="primary" @click="submitDialogUser">提交</el-button>
        </template>
    </el-dialog>

    <!-- 主体内容插槽 -->
    <main>
        <el-table :data="pagedUsers" border style="width: 100%">
            <el-table-column prop="userid" label="ID"></el-table-column>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <div style="display: flex; gap: 8px; align-items: center;">
                        <el-button size="mini" type="primary" icon="EditPen" @click="editUser(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" icon="Delete" @click="deleteUser(scope.row.userid)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </main>

    <!-- 分页和版权信息底部居中显示 -->
    <div style="position: fixed; left: 0; bottom: 0; width: 100%; background: #fff; z-index: 999;">
        <div style="display: flex; flex-direction: column; align-items: center; padding: 10px 0;">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="filteredUsers.length"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @current-change="handlePageChange"
                    style="margin-bottom: 10px;">
            </el-pagination>
            <footer class="footer" style="text-align: center;">
                &copy; 2025 备件管理系统 - 版权所有
            </footer>
        </div>
    </div>
</div>

<!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script> <!-- 新增图标资源 -->

<script>
    const { createApp } = Vue;
    const { EditPen, Delete } = ElementPlusIconsVue; // 引入图标
    const apiClient = axios.create({
        //本机地址
        //baseURL: 'http://localhost:8086',
        //服务器 地址
        baseURL: 'http://8.137.85.243:8086',
        timeout: 5000
    });

    const app = createApp({
        data() {
            return {
                users: [],
                newUser: { username: '', password: '', role: '' },
                searchText: '',
                showDialog: false,
                dialogUser: { username: '', password: '', role: '' },
                currentPage: 1,
                pageSize: 10
            };
        },
        computed: {
            filteredUsers() {
                if (!this.searchText) return this.users;
                return this.users.filter(item =>
                    String(item.username).includes(this.searchText) ||
                    String(item.role).includes(this.searchText)
                );
            },
            pagedUsers() {
                const start = (this.currentPage - 1) * this.pageSize;
                return this.filteredUsers.slice(start, start + this.pageSize);
            }
        },
        mounted() {
            this.loadUsers();
        },
        methods: {
            async loadUsers() {
                const res = await apiClient.get('/api/users/listall');
                this.users = res.data;
            },
            async addUser() {
                if (!this.newUser.username || !this.newUser.password || !this.newUser.role) {
                    alert('请填写完整信息');
                    return;
                }
                await apiClient.post('/api/users/insert', this.newUser);
                this.newUser = { username: '', password: '', role: '' };
                this.loadUsers();
            },
            async deleteUser(id) {
                if (!confirm('确定删除？')) return;
                await apiClient.delete(`/api/users/delete/${id}`);
                this.loadUsers();
            },
            logout() {
                window.location.href = '/dashboard.html';
            },
            handleSearch() {
                this.currentPage = 1;
            },
            editUser(user) {
                this.dialogUser = { ...user };
                this.showDialog = true;
            },
            async submitDialogUser() {
                if (!this.dialogUser.username || !this.dialogUser.password || !this.dialogUser.role) {
                    alert('请填写完整信息');
                    return;
                }
                if (this.dialogUser.userid) {
                    await apiClient.put(`/api/users/update/${this.dialogUser.userid}`, this.dialogUser);
                } else {
                    await apiClient.post('/api/users/insert', this.dialogUser);
                }
                this.dialogUser = { username: '', password: '', role: '' };
                this.showDialog = false;
                this.loadUsers();
            },
            handlePageChange(page) {
                this.currentPage = page;
            }
        }
    });

    app.use(ElementPlus);
    app.component('EditPen', EditPen); // 注册图标组件
    app.component('Delete', Delete);
    app.mount('#app');
</script>
</body>
</html>